<script setup lang="ts">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);

import { computed, onMounted, ref, nextTick, defineProps, watch } from "vue";
import { RawBigOrderData, RawBigOrderDataParams } from "./query";

const props = defineProps({
  data: {
    required: true,
    default: (): Array<RawBigOrderData> => [],
  },
  params: {
    required: true,
    default: (): Array<RawBigOrderDataParams> => [],
  },
});
const divRef = ref(null);
const myChart = ref(null as any as echarts.ECharts);

// computed
const calcOptions = computed(() => {
  if (props.data.length === 0) {
    return {};
  }
  return {
    xAxis: {
      data: props.data.map((d) => d.date),
    },
    yAxis: {},
    series: [
      {
        data: props.data.map((d) => d[props.params[0]]),
        symbol: "none",
        type: "line",
        lineStyle: {
          color: "red",
        },
        areaStyle: {
          color: "red",
          opacity: 0.3,
        },
      },
      {
        data: props.data.map((d) => d[props.params[1]]),
        type: "line",
        symbol: "none",
        areaStyle: {
          color: "green",
          opacity: 0.3,
        },
        lineStyle: {
          color: "green",
        },
      },
    ],
  };
});

watch(props.data, () => {
  nextTick(() => {
    myChart.value.setOption(calcOptions.value);
  });
});

onMounted(() => {
  myChart.value = echarts.init(divRef.value as any as HTMLElement);
});
</script>

<template>
  <div class="chart-wrapper">
    <div class="line-chart-container" ref="divRef"></div>
  </div>
</template>

<style scoped>
.chart-wrapper {
  display: flex;
  justify-content: center;
}
.line-chart-container {
  flex: none;
  width: 1300px;
  height: 400px;
}
</style>
